<div ng-controller="DashboardCtrl">
  <div class="bg-light lter b-b wrapper-md row">
      <div class="col-sm-6">
	  	  <h1 class="m-n font-thin h3">Dashboard</h1>
	  </div>
    
	  <div class="col-sm-6 text-right hidden-xs">
	  	  <button class="btn m-b-xs btn-sm btn-success btn-addon" ng-click="create()"><i class="fa fa-search"></i>Create New Cluster</button>
	  </div>
  </div>
  <div class="wrapper-md text-center" style="overflow: scroll;">

    <div class="row">
      <div class="col-xs-3" ng-repeat="cluster in clusters">
        <a style="height:150px" ng-click="openCluster(cluster)" class="block panel padder-s item" ng-class="{true: 'bg-info', false: 'bg-danger'}[cluster.cluster_state == 'ok']">
          <span class="text-white font-thin h1 block">{{cluster.name}}</span>
          <span class="text-white font-thin h3 block">Know Nodes: {{cluster.cluster_known_nodes}}  Cluster Size: {{cluster.cluster_size}}</span>
          <span class="text-muted text-xs">ClusterID: {{cluster.uuid}}</span>
          <span class="bottom text-right w-full">
              <i class="fa fa-area-chart text-muted m-r-sm"></i>
          </span>
        </a>
      </div>

      <div class="col-xs-3">
        <a style="height:150px" ng-click="addCluster()" class="block panel padder-s item col padder-v text-muted b-r b-light">
            <i class="fa fa-plus block m-b-xs fa-4x"></i>
            <span>Add Cluster Monitor</span>
        </a>
      </div>

    </div>

  </div>
</div>